<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="VectorX">
    <meta name="keywords" content="酷炫球">
    <title>酷炫球</title>
    <style>
        div {
            float: left;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            animation: bounce .5s infinite ease-in alternate;
        }

        .ball1 {
            background-color: red;
            animation-delay: .1s;
        }

        .ball2 {
            background-color: yellow;
            animation-delay: .2s;
        }

        .ball3 {
            background-color: green;
            animation-delay: .3s;
        }

        .ball4 {
            background-color: blue;
            animation-delay: .4s;
        }

        .ball5 {
            background-color: pink;
            animation-delay: .5s;
        }

        .ball6 {
            background-color: orange;
            animation-delay: .6s;
        }

        .ball7 {
            background-color: fuchsia;
            animation-delay: .7s;
        }

        .ball8 {
            background-color: gray;
            animation-delay: .8s;
        }

        .ball9 {
            background-color: darkcyan;
            animation-delay: .9s;
        }

        .ball10 {
            background-color: indigo;
            animation-delay: 1s;
        }

        .ball11 {
            background-color: black;
            animation-delay: 1.1s;
        }

        .ball12 {
            background-color: darkcyan;
            animation-delay: 1.2s;
        }

        .ball13 {
            background-color: darkkhaki;
            animation-delay: 1.3s;
        }

        .ball14 {
            background-color: brown;
            animation-delay: 1.4s;
        }

        .ball15 {
            background-color: mediumpurple;
            animation-delay: 1.5s;
        }



        @keyframes bounce {
            from {
                margin-top: 0;
            }

            to {
                margin-top: 500px;
            }

        }
    </style>
</head>

<body>
    <div class="ball1"></div>
    <div class="ball2"></div>
    <div class="ball3"></div>
    <div class="ball4"></div>
    <div class="ball5"></div>
    <div class="ball6"></div>
    <div class="ball7"></div>
    <div class="ball8"></div>
    <div class="ball9"></div>
    <div class="ball10"></div>
    <div class="ball11"></div>
    <div class="ball12"></div>
    <div class="ball13"></div>
    <div class="ball14"></div>
    <div class="ball15"></div>
</body>

</html>